<template>
    <div class="page-content">
        <!-- <myInput></myInput>
        <myInput>搜索1</myInput> -->
        <myInput @slot-change="handleSlotChange" :dynamicSlotName="currentSlot">
            <!-- 具名插槽使用的两种方式  #name 和 v-slot：name -->
            <template #prepend>
                <p>prepend</p>
            </template>
            <template v-slot:second-line-title>
                <span>如何使用slot</span>
            </template>
            <!-- 作用域插槽：子组件向父组件传递数据：使用方式v-slot:name="slotProps", 
            slotProps是自定义的变量，可任意命名,default是默认插槽，可以不写v-slot="slotProps"
            子组件<slot :item="item"></slot>，后item是子组件向父组件传递的数据，前item是自定义的变量，
            可任意命名,父组件使用{{slotProps.item.name}}接收{ "haha":{"id":1, "name":"Item 1" }}
            -->
            <!-- 插槽没命名的话就用default接收，也可以#default="slotProps" -->
            <!-- <template v-slot:default="slotProps">
                <span>{{ slotProps.item.name||'暂无数据' }}</span>
                <span>{{ slotProps.haha && slotProps.haha.name }}</span>
            </template> -->
            <!-- 命名了(有name)的话就按名字写， 或者#custom ="" 可以使用解构-->
            <template v-slot:custom="{ haha }">
                <span>{{ haha && haha.name }}</span>
            </template>
            <!-- 动态插槽,什么情况下使用？ 子组件中插槽名字也可以设置为动态的，父组件根据条件展示不同的内容 :name="item+'id'"
            和v-if的区别：主要区别在于控制权和灵活性
            动态：适合内容由父组件动态注入，，动态生成插槽，适合遍历数据生成动态插槽，在父组件
            v-if:是放在子组件的，适合子组件完全掌控内容,也就是在子组件内条件渲染固定内容，父组件传参即可
            -->
            <!-- 动态使用方法：v-slot:[currentSlot] #[currentSlot]="{ item }" -->
            <button>切换插槽</button>
            <template v-slot:[currentSlot]="{item}">
                <div v-if="currentSlot === 'my-header'">
                    头部区域 - {{ item.title }}
                </div>
                <div v-else>
                    底部区域 - {{ item.title }}
                </div>
            </template>
        </myInput>
    </div>
</template>
<script>
import myInput from '@/components/Input.vue'
export default {
    name: 'Home',
    components: { myInput },
    data() {
        return {
            currentSlot: 'my-header',
        }
    },
    methods: {
        sayHello() {
            alert('Hello World')
        },
        handleSlotChange(slotName) {
            this.dynamicSlotName = slotName
        },
        toggleSlot() {
            this.currentSlot = this.currentSlot === 'my-header' ? 'footer' : 'my-header'
        }
    },
}
</script>